<template>
	<el-row style="margin-bottom: 25px">
		<el-col :xs="24" :sm="24" :lg="8" class="ibox-content" style="margin-right: 15px;margin-left: 15px;">
			<h5 class="text-center">
				<a id="autotest_res1" href>自动化测试平均执行率</a>
				{{Math.round(exc)}}%
			</h5>
			<div class="text-center">
				<ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
				<!-- <div id="sparkline1">
					<canvas width="140" height="140"></canvas>
				</div> -->
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="8" class="ibox-content" style="margin-right: -15px;margin-left: -15px;">
			<h5 class="text-center">
				<a id="autotest_res2" href>自动化测试平均通过率</a>
				{{Math.round(pass)}}%
			</h5>
			<div class="text-center">
				<div id="sparkline2">
					<canvas width="140" height="140"></canvas>
				</div>
			</div>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="8" class="ibox-content" style="margin-right: -15px;margin-left: -15px;">
			<h5 class="text-center">
				<a id="autotest_res3" href>自动化测试平均覆盖率</a>
				{{Math.round(cover)}}%
			</h5>
			<div class="text-center">
				<div id="sparkline3">
					<canvas width="140" height="140"></canvas>
				</div>
			</div>
		</el-col>
	</el-row>
</template>
<script>
export default {
	name: 'autotest_result',
	props: {
		pass: Number,
		exc: Number,
		cover: Number
	},
	data() {
		this.chartSettings = {
			radius: 70,
			offsetY: 120,		
			itemStyle: {
				normal: {
					color: 'orange'
				}
			},			
			labelLine: {
				show: false
			},
			label: {
				show: false
			}
    }
		return {
			autotest_url:
				'/#/project/' + this.$route.params.pmsProjectId + '/devops/autotest',
			chartData: {
				columns: ['日期', '访问用户'],
				rows: [
					// { '日期': '1/1', '访问用户': 1393 },
					// { '日期': '1/2', '访问用户': 3530 },
					// { '日期': '1/3', '访问用户': 2923 },
					// { '日期': '1/4', '访问用户': 1723 },
					// { '日期': '1/5', '访问用户': 3792 },
					{ '日期': '1/1', '访问用户': 4593 }
				]
			}
		};
	},
	methods: {
		draw: function() {
			var pass;
			var exc;
			var cover;
			if (this.pass == null) {
				pass = 0;
				exc = 0;
				cover = 0;
			} else {
				exc = Math.round(this.exc);
				pass = Math.round(this.pass);
				cover = Math.round(this.cover);
			}
			// $('#sparkline1').sparkline([exc, 100 - exc], {
			// 	type: 'pie',
			// 	height: '140',
			// 	sliceColors: ['#1ab394', 'orange']
			// });
			// $('#sparkline2').sparkline([pass, 100 - pass], {
			// 	type: 'pie',
			// 	height: '140',
			// 	sliceColors: ['#1ab394', 'orange']
			// });
			// $('#sparkline3').sparkline([cover, 100 - cover], {
			// 	type: 'pie',
			// 	height: '140',
			// 	sliceColors: ['#1ab394', 'orange']
			// });
			// $('#autotest_res1').attr('href', this.autotest_url);
			// $('#autotest_res2').attr('href', this.autotest_url);
			// $('#autotest_res3').attr('href', this.autotest_url);
		}
	},
	mounted() {
		console.log(this.pass)
		console.log(this.cover)
		this.draw();	
	}
};
</script>

<style lang="scss" scoped>
	@import '../../assets/common/common.scss';
	a {
			color: #337ab7;
			cursor: pointer;
	}
	.text-align{
		text-align: center;
	}
</style>